<template>
	<view class="tabbarpage-container">
		<!--胶囊上方-->
		<view :style="{'padding-top': statusBarHeight}"></view>

		<!--胶囊-->
		<view class="page-header-back" :style="{ 'height': capsuleHeight }">
			<navigator open-type="navigateBack" hover-class="navigator-hover">
				<view class="back-icon">
					<wd-icon name="thin-arrow-left" size="18px"></wd-icon>
				</view>
			</navigator>
			<view class="title">
				生成练习
			</view>
			<view style="width: 18px">
				<!-- placeholder for symmetry -->
			</view>

		</view>

		<!--主体-->
		<view class="tabbarpage-body">
            <wd-config-provider theme="dark">
                <view class="gen-ex-page">
                    <CardCom title="选择时间段">
                        <wd-calendar type="daterange" v-model="value" @confirm="handleConfirm" />
                    </CardCom>
                    <CardCom title="选择你想练习的题目标签">
                        <!--标签-->
						<div class="ques-line">
							<!-- <div>领域：</div> -->
							<div class="tags-container">
								<div class="tag" v-for="(tag, index) in tags.field" :key="index">
									<div style="margin-right: 4px;">{{tag}}</div>
									<wd-icon @click="deleteTag('field', index)" v-if="checkTag(tag)" name="close-bold" size="18px"></wd-icon>
								</div>
								<!--新增-->
								<div @click="addNewTag('field')" class="new-tag" v-if="tags.field.length < 4">
									<wd-icon name="add1" size="18px"></wd-icon>
								</div>
							</div>
							<!-- <div>题型：</div> -->
							<div class="tags-container">
								<div class="tag" v-for="(tag, index) in tags.category" :key="index">
									<div style="margin-right: 4px;">{{tag}}</div>
									<wd-icon @click="deleteTag('category', index)" v-if="checkTag(tag)" name="close-bold" size="18px"></wd-icon>
								</div>
								<!--新增-->
								<div @click="addNewTag('category')" class="new-tag" v-if="tags.category.length < 4">
									<wd-icon name="add1" size="18px"></wd-icon>
								</div>
							</div>
							<!-- <div>错误原因：</div> -->
							<div class="tags-container">
								<div class="tag" v-for="(tag, index) in tags.falseReason" :key="index">
									<div style="margin-right: 4px;">{{tag.falseReason}}</div>
									<wd-icon @click="deleteTag('falseReason', index)" v-if="checkTag(tag)" name="close-bold" size="18px"></wd-icon>
								</div>
								<!--新增-->
								<div @click="addNewTag('falseReason')" class="new-tag" v-if="tags.falseReason.length < 4">
									<wd-icon name="add1" size="18px"></wd-icon>
								</div>
							</div>
						</div>
                    </CardCom>
                    <wd-button @click="submit">提交</wd-button>
                    <NewTagCom @addTag=addTagSure @close=changeTagChangeShow v-if="showingAddTag"></NewTagCom>
                </view>
            </wd-config-provider>
		</view>

	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { globalProps } from '@/js/global.js'
import CardCom from '@/components/CardCom.vue'
import NewTagCom from '@/components/NewTagCom.vue'
import timestampToFormattedDateTime from '@/js/timestampToFormattedDateTime.js';

const statusBarHeight = ref(globalProps.statusBarHeight)
const capsuleHeight = ref(globalProps.capsuleHeight)

const value = ref(Date.now())
function handleConfirm({ value }) {
	const startTime = timestampToFormattedDateTime(value[0]);
	const endTime = timestampToFormattedDateTime(value[1]);
	uni.request({
		url: globalProps.baseApi + '/cuotiji/tagByTime',
		method: 'GET',
		data: {
			startTime: startTime,
			endTime: endTime,
			userID: globalProps.userInfo.id
		},
		success: (res) => {
			console.log('成功获取tag：', res)
			tags.value = res.data
		},
		fail: (err) => {
			uni.showToast({
				title: '获取tag失败',
				icon: 'none'
			})
			console.log(err)
		}
	})
}

const redirect = ()=>{
    uni.navigateTo({
        url: '/pages/newques/SelectQuesPage/SelectQuesPage'
    })
}

// const tags = ref(["时态", "语法", "词汇", "阅读", "写作", "听力", "口语", "翻译", "其他"])
// const tags = ref({
// 	"field": [
// 		"科技",
// 		"科学"
// 	],
// 	"category": [
// 		"yuedu"
// 	],
// 	"falseReason": [
// 		"填写错误"
// 	]
// })
const tags = ref({
	field: [
	],
	category: [
	],
	falseReason: [
	]
})
const showingAddTag = ref(false)

onMounted(()=>{
	// getTags()
	console.log(tags.value)
	uni.request({
		url: globalProps.baseApi + '/cuotiji/tagByTime',
		method: 'GET',
		data: {
			userID: globalProps.userInfo.id
		},
		success: (res) => {
			console.log('成功获取tag：', res.data)
			tags.value = res.data
		},
		fail: (err) => {
			uni.showToast({
				title: '获取tag失败',
				icon: 'none'
			})
			console.log(err)
		}
	})
})

//标签
function checkTag(input){
    const regex = /^(题型|.*题)$/i;
    return !regex.test(input);
}
function addNewTag(tagType){
    changeTagChangeShow()
}
function changeTagChangeShow(){
    showingAddTag.value = !showingAddTag.value
    console.log(showingAddTag.value)
}
function addTagSure(e){
    tags.value.push(e)
    changeTagChangeShow()
}
function deleteTag(arrayName, tagIndex){
    tags.value[arrayName].splice(tagIndex, 1);
}

const submit = () => {
	console.log('提交：', tags.value);
	
	// 使用map函数提取id数组
	const idArray = tags.value.falseReason.map(obj => obj.id);
	const categoryArray = tags.value.category.map(obj => obj);
	const fieldArray = tags.value.field.map(obj => obj);
	console.log('idArray:', idArray);
	console.log('发送data:', {
			category: categoryArray,
			falseReason: idArray,
			field: fieldArray,
			userID: globalProps.userInfo.id
		});
    uni.request({
		// url: globalProps.baseApi + 'cuotiji/cuotiForRedo?' + category + field + '&userID=' + globalProps.userInfo.id,
		url: globalProps.baseApi + 'cuotiji/cuotiForRedo',
		method: 'GET',
		data: {
			category: categoryArray,
			falseReason: idArray,
			field: fieldArray,
			userID: globalProps.userInfo.id
		},
		success: (res) => {
			console.log('成功生成练习：', res)
		},
		fail: (err) => {
			uni.showToast({
				title: '生成练习失败',
				icon: 'none'
			})
			console.log(err)
		}
	})
}
</script>

<style>
	@import "@/css/global.css";
	@import "@/css/animation.css";
	
	page{
		color:white;
	}

    .gen-ex-page{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        height: 100%;
        margin: 10px 20px;
    }

    .ques-line{
		white-space: pre-line;
		word-break: break-all;
		display: flex;
		flex-direction: column;
	}
    .ques-line .tags-container{
		display: flex;
        flex-wrap: wrap;
        flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
        /* margin-bottom: -10px; */
	}
	.tags-container .tag{
		background-color: #4942ad;
		padding: 4px 8px;
		font-size: 13px;
		margin-right: 8px;
		border-radius: 4px;
		margin-left: -2px;
        margin-bottom: 10px;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}


</style>
